<template>
  <div class="container">
    <div class="top">
      <h1 class="title">
        音乐馆
      </h1>
    </div>
    <!-- 导航栏 -->
    <nav-bar :navcategories="categories"></nav-bar>
    <!-- 内容 -->
    <div class="content">
      <nuxt-child />
    </div>
  </div>
</template>

<script>
import NavBar from '../components/NavBar'
export default {
  components: {
    NavBar
  },
  data() {
    return {
      categories: [
        { title: '精选', link: '/musiccenter' },
        { title: '排行', link: '/musiccenter/ranking' },
        { title: '歌手', link: '/musiccenter' },
        { title: '分类歌单', link: '/musiccenter/ranking' }
      ]
    }
  }
}
</script>

<style scoped>
.container {
  margin: 0 auto;
  min-height: 100vh;
}

.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  margin-left: 20px;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 1px;
}
</style>
